<template>
  <!-- <div class="content-box">
    <common-header :title="title"></common-header> -->
    <div class="page-content">
      <table border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th style="width:30%">收款日期</th>
            <th style="width:17.5%">收款金额</th>
            <th style="width:17.5%">收回本金</th>
            <th style="width:17.5%">收回利息</th>
            <th style="width:17.5%">剩余本金</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in resultList" :key="index">
            <td>{{item.date}}</td>
            <td>{{item.amountCollect}}</td>
            <td>{{item.principal}}</td>
            <td>{{item.interest}}</td>
            <td>{{item.surplus}}</td>
          </tr>
        </tbody>
      </table>
      <table border="0" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td style="width:30%">总计</td>
            <td style="width:17.5%">{{totalObj.amountCollect}}</td>
            <td style="width:17.5%">{{totalObj.principal}}</td>
            <td style="width:17.5%">{{totalObj.interest}}</td>
            <td style="width:17.5%"></td>
          </tr>
        </tbody>
      </table>
      <p class="sy">实际收益：<span>{{totalObj.interest}}</span></p>
      <!-- <v-table is-horizontal-resize style="width:100%" :columns="columns" :table-data="tableData"></v-table> -->
      <div class="btnPay" @click="reset()">重新计算</div>
      <commonFooter></commonFooter>
    </div>
  <!-- </div> -->
</template>
<script>
import "vue-easytable/libs/themes-base/index.css";
import { commonHeader, commonFooter } from "common";
import moment from "moment";
import "moment/locale/zh-cn";
// import { VTable } from "vue-easytable";

export default {
  name: "investment",
  components: {
    commonHeader,
    commonFooter
  },

  mounted() {
    this.resultList = [];
    this.query = this.$route.query;
    switch (this.query.pickerValue + "") {
      case "1":
        this.dayInterest();
        break;
      case "2":
        this.dayRepeatInterest();
        break;
      case "3":
        this.disposable();
        break;
      case "4":
        this.hourInterest();
        break;
      default:
        break;
    }
  },
  methods: {
    reset() {
      this.$router.go(-1);
    },
    dayInterest() {
      // 每日返息
      for (let i = 1; i <= this.query.dateRange; i++) {
        let obj = {};
        obj.date = moment()
          .add(i, "days")
          .format("MM-DD");
        obj.principal = 0;
        obj.surplus = this.query.count;
        obj.interest = parseFloat(
          (this.query.count * this.query.dayPer) / 100
        ).toFixed(2);
        obj.amountCollect = obj.interest;
        if (i == this.query.dateRange) {
          obj.surplus = 0;
          obj.principal = this.query.count;
          obj.amountCollect =
            parseFloat(obj.principal) + parseFloat(obj.interest);
        }
        this.calTotal(obj);
        this.resultList.push(obj);
      }
    },
    calTotal(obj) {
      this.totalObj.amountCollect = (
        parseFloat(this.totalObj.amountCollect) + parseFloat(obj.amountCollect)
      ).toFixed(2);;
      this.totalObj.principal += parseFloat(obj.principal);
      this.totalObj.interest = (
        parseFloat(this.totalObj.interest) + parseFloat(obj.interest)
      ).toFixed(2);
    },
    dayRepeatInterest() {
      // 每日返息
      let lastCount = parseInt(this.query.count);
      for (let i = 1; i <= this.query.dateRange; i++) {
        let obj = {};
        obj.date = moment()
          .add(i, "days")
          .format("MM-DD");
        obj.principal = 0;
        obj.interest = parseFloat(
          (lastCount * this.query.dayPer) / 100
        ).toFixed(2);
        obj.surplus = parseFloat(lastCount);
        obj.amountCollect = obj.interest;
        if (i == this.query.dateRange) {
          obj.surplus = 0;
          obj.principal = lastCount;
          obj.amountCollect =
            parseFloat(obj.principal) + parseFloat(obj.interest);
        }
        lastCount = parseFloat(parseFloat(obj.interest) + obj.surplus).toFixed(
          2
        );
        this.calTotal(obj);
        this.resultList.push(obj);
      }
    },
    hourInterest() {
      for (let i = 1; i <= this.query.dateRange * 24; i++) {
        let obj = {};
        obj.date = moment()
          .add(i, "hours")
          .format("MM-DD HH:mm:ss");
        obj.principal = 0;
        obj.interest = parseFloat(
          (parseInt(this.query.count) * this.query.dayPer) / 100 / 24
        ).toFixed(2);
        obj.surplus = parseInt(this.query.count);
        obj.amountCollect = obj.interest;
        if (i == this.query.dateRange * 24) {
          obj.principal = obj.surplus;
          obj.surplus = 0;

          obj.amountCollect =
            parseFloat(obj.principal) + parseFloat(obj.interest);
        }
        this.calTotal(obj);
        this.resultList.push(obj);
      }
    },
    disposable() {
      //一次性计算
      let obj = {};
      obj.date = moment()
        .add(this.query.dateRange, "days")
        .format("MM-DD");
      obj.surplus = 0;
      obj.principal = parseFloat(this.query.count);
      obj.interest =
        ((this.query.count * this.query.dayPer) / 100) *
        parseInt(this.query.dateRange);
      obj.amountCollect = parseInt(obj.principal) + obj.interest;
      this.calTotal(obj);
      this.resultList.push(obj);
    }
  },
  data() {
    return {
      query: "",
      title: "收益结果",
      totalObj: {
        amountCollect: 0,
        interest: 0,
        principal: 0
      },
      resultList: []
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font: 0.35rem/1.5 "Microsoft YaHei";
  color: #333;
  background: #fff;
  thead {
    background: #f6f4f5;
  }
  td,
  th {
    min-width: 0.2rem;
    border: 1px #ddd solid;
    max-width: 5rem;
    padding: 0.2rem 0;
    word-wrap: break-word;
    word-break: break-all;
  }
}
.sy{
  font:.5rem/2 "Microsoft YaHei";
  background: #fff;
  padding: .2rem;
  span{
    color: @base-color
  }
}
</style>
